<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/popper.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../js/bootstrap.min.css"/>
		<style type="text/css">
			.col-sm{
				border: 1px solid #CCCCCC;
			}
			.c1{
				background-color: red;
			}
			.c2{
				background-color: green;
			}
			.c3{
				background-color: black;
				color: white;
			}
			.b1{
				background-color: pink;
			}
			.b2{
				background-color: lightgreen;
			}
			.b3{
				background-color: #000000;
			}
		</style>
	</head>
	<body>
		  <div class="input-group-prepend">
		    <div class="input-group-text" style="background-color: red;">
		      <input id="d1" type="checkbox" >
		    </div>
			<div class="input-group-text" style="background-color: green;">
			  <input id="d2" type="checkbox">
			</div>
			<div class="input-group-text" style="background-color: black;">
			  <input id="d3" type="checkbox">
			</div>
		  </div>
		
		<div class="container">
		  <div class="row">
		    <div class="col-sm">
		      新闻
		    </div>
		    <div class="col-sm">
		      娱乐
		    </div>
		    <div class="col-sm">
		      体育
		    </div>
			<div class="col-sm">
			  电影
			</div>
			<div class="col-sm">
			  音乐
			</div>
			<div class="col-sm">
			  旅游
			</div>
		  </div>
		</div>
		<script type="text/javascript">
			$(function(){
				$("#d1").click(function(){
					$(".container").toggleClass("c1");
					$("body").toggleClass("b1");
				})
				$("#d2").click(function(){
					$(".container").toggleClass("c2");
					$("body").toggleClass("b2");
				})
				$("#d3").click(function(){
					$(".container").toggleClass("c3");
					$("body").toggleClass("b3");
				})
			})
		</script>
	</body>
</html>
